<template>
  <div class="sousuo">
    <div>
      <span class="bocl" @click="$router.back()"></span>
      <div class="int">
        <input
          v-model="sousuoName"
          @change="sousuoEnter"
          type="text"
          placeholder="搜索你喜欢的宝贝"
        />
        <img
          src="https://static.epetbar.com/static_wap/epetapp/pages/search/images/search-ico.png"
          alt=""
        />
      </div>
      <span class="sstitle">搜索</span>
    </div>
    <p class="tjss">
      <img
        src="https://static.epetbar.com/static_wap/epetapp/pages/search/images/rmss.png"
        alt=""
      />&nbsp;<span>精品推荐</span>
    </p>
    <div class="jptj">
      <div v-for="v in sousuo.list" :key="v.sort">
        {{ v.words }}
      </div>
    </div>
    <p class="tjss">
      <img
        src="https://static.epetbar.com/static_wap/epetapp/pages/search/images/zjss.png"
        alt=""
      />&nbsp;<span>最近搜索</span>
    </p>
    <div class="cleco">
      <div>
        <span v-for="(v, i) in sLishi" :key="i">
          {{ v }}
        </span>
      </div>
      <div @click="clessls">清空搜索历史</div>
    </div>
    <div class="yjc">
      <p>
        {{ sousuo.rankList.title }}&nbsp;<span>{{
          sousuo.rankList.subtitle
        }}</span>
      </p>
      <div v-for="v in sousuo.rankList.rank_list" :key="v.rank">
        <span>{{ v.rank }}</span>
        <span>{{ v.subject }}</span>
        <img v-if="v.suffix_img.img_url" :src="v.suffix_img.img_url" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import sousuo from "../../assets/sousuo";
export default {
  name: "sousuo",
  data() {
    return {
      sousuo,
      sousuoName: "",
      sLishi: JSON.parse(localStorage.getItem("sLishi")) || [],
    };
  },
  async created() {
    // let tuijian = await this.axios({
    //   url: `https://mall.api.epet.com/v3/goodslist.html?callback=jQuery1710663277928503138_${new Date().getTime()}&do=getHotKeys&pet_type=dog&system=wap&isWeb=1&version=576&distinct_id=17c4ab1bdd29f-07eecaf953edbd4-5437971-250125-17c4ab1bdd3c34&_=${new Date().getTime()}`,
    // });
    // console.log(tuijian, "*******");
    // console.log(sousuo);
  },
  methods: {
    async sousuoEnter() {
      let keyWords = this.sousuoName;
    //   console.log(keyWords);
      let ssList = await this.axios(
        `https://mallcdn.api.epet.com/v3/goods/list/main.html?version=358&brandid=0&page=1&orderby=def_desc&cateid=0&pet_type=dog&extend_pam=keyword:${keyWords}&real_wid=&region=&atid=&system=wap&isWeb=1&distinct_id=17c4b6216126db-0bbcb8ea5d9f2e-5437971-250125-17c4b62161365&_=1633392555199`
      );
      //   console.log(ssList.data.list);
      this.sLishi.push(keyWords);

      localStorage.setItem("sLishi", JSON.stringify(this.sLishi));
      this.$router.push({
        name: "glsplb",
        params: {
          ssList: ssList.data.list,
        },
      });
      this.sousuoName = ""
    },
    clessls(){
        localStorage.removeItem("sLishi");
        this.sLishi = []
    }
  },
};
</script>

<style lang="less" scoped>
.sousuo {
  background-color: rgb(244, 245, 247);
  outline: 0.02rem solid red;
  padding-bottom: 2rem;
  > div {
    box-sizing: border-box;
    width: 100%;
    height: 1rem;
    padding: 0.14rem 0.24rem;
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    .bocl {
      display: inline-block;
      width: 0.32rem;
      height: 0.32rem;
      //   margin-top: .16rem;
      border-top: 0.02rem solid rgb(153 153 153);
      border-left: 0.02rem solid rgb(153 153 153);
      transform: rotate(-45deg);
    }
    > .int {
      width: 5.5rem;
      background-color: rgb(246, 246, 246);
      display: flex;
      padding: 0.15rem 0.2rem;
      justify-content: space-between;
      > input {
        width: 3.5rem;
        background: none;
        outline: none;
        border: 0;
        height: 0.4rem;
        font-size: 0.15rem;
      }
      > img {
        width: 0.32rem;
        height: 0.32rem;
        position: relative;
        top: 0.05rem;
      }
    }
    .sstitle {
      font-size: 0.28rem;
    }
  }
  > .tjss {
    font-size: 0.28rem;
    height: 0.5rem;
    padding-left: 0.2rem;
    margin: 0;
    background-color: rgb(251, 251, 253);
    color: rgb(114, 114, 114);
    > img {
      width: 0.4rem;
      position: relative;
      top: 0.1rem;
    }
  }
  > .cleco {
    width: 100%;
    font-size: 0.3rem;
    background: none;
    display: block;
    height: 2rem;
    > div:nth-child(1) {
      > span {
        background-color: #fff;
      }
    }
    > div:nth-child(2) {
      display: block;
      height: 0.6rem;
      border: 0.02rem solid rgb(161, 161, 161);
      width: 2rem;
      line-height: 0.6rem;
      text-align: center;
      margin: 0 auto;
    }
  }
  > .yjc {
    width: 95%;
    margin: 0 auto;
    display: block;
    font-size: 0.26rem;
    height: 11rem;
    background-color: rgb(254, 249, 241);
    border-radius: 0.5rem;
    > p {
      font-size: 0.3rem;
      height: 0.3rem;
      > span {
        font-size: 0.24rem;
      }
    }
    > div {
      width: 100%;
      height: 0.8rem;
      display: flex;
      margin: 0.2rem 0;
      > span:nth-child(1) {
        width: 0.4rem;
        height: 0.4rem;
        background-color: rgb(229, 202, 165);
        text-align: center;
        line-height: 0.4rem;
        border-radius: 0.2rem;
        margin-right: 0.2rem;
      }
      > span:nth-child(2) {
        width: 5.34rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 0.45rem;
        line-height: 0.45rem;
      }
      > img {
        width: 0.26rem;
        height: 0.32rem;
      }
    }
  }
  > .jptj {
    width: 100%;
    height: 1.86rem;
    font-size: 0.24rem;
    display: flex;
    line-height: 0.4rem;
    flex-wrap: wrap;
    > div {
      padding: 0.1rem;
      margin-right: 0.1rem;
      margin-bottom: 0.1rem;
      border-radius: 0.4rem;
      background-color: rgb(255, 255, 255);
    }
  }
}
</style>